<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <!--初始化默认样式-->
    <link rel="stylesheet" href="css/reset.css">
    <!--页面公共样式，包含头部、尾部等-->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/element-ui.css">
    <link rel="stylesheet" href="css/login.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script src="js/flexible.js"></script>
    <script src="js/browser.min.js"></script>
    <script src="js/polyfill.min.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        <login-in ></login-in>
    </div>

    <!--使用vue渲染页面-->
    <script src="js/vue.development.js"></script>
    <!--<script src="js/vue-validator.js"></script>-->
    <script src="js/element-ui.js"></script>
    <script src="js/js.cookie.js"></script>
    <script src="js/axios.js"></script>

    <!--用于模拟接口，上线后注释-->
    <script src="js/mock.js"></script>
    <!--用于模拟接口，上线后请注释-->
    <script src="data/api.js"></script>


    <script>
        // 将cookie属性挂载到Vue原型链上
        Object.defineProperty(Vue.prototype, "$Cookies", { value: Cookies });

        // 登录组件
        var loginTemplate ="<div>\n" +
            "                <div class=\"fullbg\"></div>\n" +
            "                <section class=\"login-wrap\">\n" +
            "                   <div class=\"title\">\n" +
            "                        <a href=\"login.html\" class=\"active font20\">登录</a>\n" +
            "                        <a href=\"####\" class=\"font20\">注册</a>\n" +
            "                    </div>\n" +
            "                    <div class=\"login\">\n" +
            "                        <div class=\"login-content\">\n" +
            "                            <el-form :model=\"ruleForm\" :rules=\"rules\" ref=\"ruleForm\">\n" +
            "                                <div>\n" +
            "                                    <p>\n" +
            "                                        <span class=\"input-icon\"><img src=\"imgs/icon_account number.png\" alt=\"\"></span>\n" +
            "                                            <el-form-item prop=\"username\">\n" +
            "                                               <el-input v-model=\"ruleForm.username\" placeholder=\"请输入用户名\" clearable/>\n" +
            "                                            </el-form-item>\n" +
            "                                        <!--<has-clearbtn-input  v-model=\"username\"></has-clearbtn-input>-->\n" +
            "                                        <!--<has-clearbtn-input :input-type=\"'text'\" :input-name=\"'username'\" :placeholder-content = \"'请输入用户名'\"  v-model=\"username\" @handleClear = \"dataClear('username')\"></has-clearbtn-input>-->\n" +
            "                                    </p>\n" +
            "                                    <p>\n" +
            "                                        <span class=\"input-icon\"><img src=\"imgs/icon_password.png\" alt=\"\"></span>\n" +
            "                                        <el-form-item prop=\"userpwd\">\n" +
            "                                           <el-input show-password v-model=\"ruleForm.userpwd\" placeholder=\"请输入密码\" clearable/>\n" +
            "                                        </el-form-item>\n" +
            "                                         <!--<has-clearbtn-input :input-type=\"'password'\" :input-name=\"'pwd'\" :placeholder-content = \"'请输入密码'\"  v-model=\"userpwd\" @handleClear = \"dataClear('userpwd')\"></has-clearbtn-input>-->\n" +
            "\n" +
            "                                    </p>\n" +
            "                                     <p class=\"tips\" v-show = \"!isCorrect\">{{tipText}}</p>\n" +
            "                                </div>\n" +
            "\n" +
            "                                 <el-form-item>\n" +
            "                                    <el-button class=\"login-btn font18\" type=\"primary\" @click=\"getLogin('ruleForm')\">账号登录</el-button>\n" +
            "                                </el-form-item>\n" +
            "                            </el-form>\n" +
            "                        </div>\n" +
            "\n" +
            "                        <div class=\"wechatcode\">\n" +
            "                            <img src=\"imgs/QR code.png\" alt=\"\">\n" +
            "                            <p class=\"text-center\">扫码登录</p>\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "                </section>\n" +
            "            </div>";

        //登录组件
        Vue.component('login-in', {
            template: loginTemplate,
            data:function(){
                return{
                    isCorrect:true,
                    tipText:"",
                    ruleForm: {
                        username: '',
                        userpwd: ''
                    },
                    rules: {
                        username: [
                            { required: true, message: '请输入用户名', trigger: 'blur' },
                            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                        ],
                        userpwd: [
                            { required: true, message: '请输入密码', trigger: 'blur' },
                            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                        ]
                    }
                }
            },
            methods:{
                getLogin:function(formName){
                    var _this = this;
                    this.$refs[formName].validate(function(valid){
                        // 表单验证通过即可提交
                        if (valid) {
                            var data = {
                                "username" : _this.ruleForm.username,
                                "userpwd":_this.ruleForm.userpwd
                            }
                            axios.post("http://loginApi",data).then(_this.getUserInfo);

                        } else {
                            return false;
                        }
                    });
                },
                getUserInfo:function (res) {
                    // 请求成功则对结果进行操作
                    if (res.status == 200 && res.data) {
                        // 根据接口返回状态码鉴别用户是否可以拉取用户信息
                        res = res.data;
                        var statusCode = res.get_liveList_response.resultCode;
                        console.log(statusCode);
                        if(statusCode=="0000"){
                            this.isCorrect = true;
                            this.tipText="";
                            //将userId及userInfo存入Cookie
                            this.$Cookies.set("userId",res.get_liveList_response.result.userid);
                            this.$Cookies.set("userInfo",res.get_liveList_response.result);
                            window.location.href = "livingCategory.html"
                        }else if(statusCode == "1003" || statusCode == "1001" || statusCode == "1002" || statusCode == "1004" || statusCode == "1005"){
                            this.isCorrect = false;
                            this.tipText="用户名或密码错误"
                        }else if(statusCode == "2001" ){
                            this.isCorrect = false;
                            this.tipText="您的权限不足"
                        }
                    }else{
                        this.isCorrect = false;
                        this.tipText="未获取到用户信息"
                        return false;
                    }
                }
            }
        });

        new Vue({
            el:"#app",
            data:function(){
              return{
                  userInfo:{}
              }
            },
            created:function () {
                // this.getLogin();
            },
            methods:{

            }
        })
    </script>
</body>
</html>
